<template>
  <div class="accountMaMnagement-account">
    <el-card class="account-header">
      <Searchs></Searchs>
    </el-card>

    <h5>主账号：{{ userName }}</h5>

    <div class="account-btn">
      <el-button type="primary" @click="openDialog('dialogFormVisible')"
        >新增</el-button
      >
      <el-button type="primary" @click="openDialog('updatedialogVisible')"
        >修改</el-button
      >
      <el-button type="primary" @click="openDialog('resetDialogVisible')"
        >重置密码</el-button
      >
      <el-button type="primary" @click="openDialog('resetDialogVisible')"
        >权限管理</el-button
      >
      <el-button type="primary" @click="openDialog('resetDialogVisible')"
        >人员管理</el-button
      >
      <el-button type="primary" @click="openDialog('resetDialogVisible')"
        >启用</el-button
      >
      <el-button type="danger" @click="openDialog('stopDialogVisible')"
        >停用</el-button
      >
    </div>

    <!-- 表格 -->
    <div class="account-table">
      <Table
        :tableData="tableData"
        :tableColumn="tableColumn"
        :tableEdit="tableEdit"
        :tableShowPagination="tableShowPagination"
        :paginationObj="paginationObj"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></Table>
    </div>

    <!-- 新增 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogFormVisible"
      class="add-dialog"
      :destroy-on-close="true"
    >
      <el-divider></el-divider>
      <el-form
        :model="addForm"
        ref="addForm"
        :rules="rules"
        class="add-form"
        label-width="140px"
      >
        <el-form-item prop="accountName" label="账户名:">
          <el-input
            v-model="addForm.accountName"
            autocomplete="off"
            size="small"
            style="width: 291px"
            placeholder="请输入账户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="userName" label="员工姓名:">
          <el-input
            v-model="addForm.userName"
            autocomplete="off"
            size="small"
            style="width: 291px"
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号码:">
          <el-input
            v-model="addForm.phone"
            type="number"
            autocomplete="off"
            size="small"
            style="width: 291px"
            placeholder="请输入手机号"
            class="input-num"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="电子邮箱:">
          <el-input
            v-model.trim="addForm.email"
            autocomplete="off"
            size="small"
            style="width: 291px"
            placeholder="请输入电子邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item prop="position" label="职位层级:">
          <el-select
            v-model="addForm.position"
            size="small"
            style="width: 291px"
            placeholder="请选择职位层级"
          >
            <el-option label="经理" value="1"></el-option>
            <el-option label="员工" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="修改"
      :visible.sync="updatedialogVisible"
      class="update-dialog"
      :destroy-on-close="true"
    >
      <el-divider></el-divider>
      <el-form
        :model="updateForm"
        ref="updateForm"
        :rules="rules"
        label-width="140px"
      >
        <el-form-item label="账户名：" prop="username">
          {{ updateForm.userName }}
        </el-form-item>
        <el-form-item label="员工姓名：" prop="realName">
          {{ updateForm.realName }}
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="updateForm.phone"
            type="number"
            style="width: 291px"
            size="small"
            class="input-num"
          ></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input
            v-model="updateForm.email"
            style="width: 291px"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位层级" prop="position">
          <el-select
            v-model="updateForm.position"
            size="small"
            style="width: 291px"
            placeholder="请选择职位层级"
          >
            <el-option label="经理" :value="1" :key="1"></el-option>
            <el-option label="员工" :value="2" :key="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog
      title="title"
      :visible.sync="resetDialogVisible"
      :show-close="false"
      width="25%"
      center
      class="reset-dialog-header"
    >
      <div slot="title" class="reset-dialog-icon">
        <i class="el-icon-unlock"></i>
      </div>
      <h1>您确认对该账号重置密码吗？</h1>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button>
      </span>
    </el-dialog>
    <!-- 权限管理 -->
    <el-dialog
      title="权限管理"
      :visible.sync="powerDialogVisible"
      class="power-dialog"
      :destroy-on-close="true"
    >
      <el-divider></el-divider>
      <el-form
        :rules="rules"
        :model="ruleForm"
        ref="ruleForm"
        label-width="120px"
      >
        <el-form-item label="角色：" prop="roleName">
          <el-select
            v-model="ruleForm.roleName"
            multiple
            allow-create
            placeholder="请选择角色"
            style="width: 291px"
          >
            <el-option
              v-for="item in options"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限：">
          <el-checkbox v-model="menuNodeAll" :indeterminate="isIndeterminate">
            全选/全不选
          </el-checkbox>
        </el-form-item>
        <el-form-item class="tree" v-if="powerDialogVisible">
          <el-tree
            :data="menuOptions"
            :props="defaultProps"
            ref="menu"
            node-key="id"
            show-checkbox
            :default-checked-keys="ruleForm.ids"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </el-dialog>
    <!-- 人员管理 -->
    <el-dialog
      title="人员管理"
      :visible.sync="dialogTableVisible"
      class="user-dialog"
    >
      <el-divider></el-divider>
      <el-table
        :data="tableData"
        class="uesr-table"
        ref="userTable"
        :row-key="(row) => row.id"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55"
        ></el-table-column>
        <el-table-column
          prop="realName"
          label="员工姓名"
          width="200"
        ></el-table-column>
        <el-table-column prop="position" label="职位层级">
          <template slot-scope="scope">{{
            scope.row.position == 1 ? "经理" : "员工"
          }}</template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </el-dialog>
    <!-- 启用 -->
    <el-dialog
      title="title"
      :visible.sync="starDialogVisible"
      :show-close="false"
      width="25%"
      center
      class="star-dialog-header"
    >
      <div slot="title" class="dialog-icon">
        <i class="el-icon-circle-check"></i>
      </div>
      <h1>您确认启用该账号吗？</h1>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="starDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 停用 -->
    <el-dialog
      title="title"
      :visible.sync="stopDialogVisible"
      :show-close="false"
      width="25%"
      center
      class="stop-dialog-header"
    >
      <div slot="title" class="dialog-icon">
        <i class="el-icon-remove-outline"></i>
      </div>
      <h1>您确认停用该账号吗？</h1>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="stopDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Searchs from "./listSearch.vue";
import Table from "@/components/ability-components/table.vue";

export default {
  name: "accountMaMnagement",
  components: {
    Searchs,
    Table,
  },
  data() {
    return {
      userName: "",
      tableColumn: [
        {
          prop: "userName",
          label: "账号",
        },
        {
          prop: "roleNames",
          label: "员工姓名",
        },
        {
          prop: "position",
          label: "角色",
        },
        {
          prop: "phone",
          label: "手机号",
        },
        {
          prop: "createDate",
          label: "创建日期",
        },
      ],
      tableEdit: {
        isShowEdit: false,
      },
      tableShowPagination: true,
      paginationObj: {
        page: 1,
        size: 10,
        total: 0,
      },

      inputForm: {
        userName: "",
        realName: "",
        roleId: "",
        phone: "",
        status: "",
        id: "",
      },
      value1: "",
      model: "",
      tableData: [],
      gridData: [],
      dialogFormVisible: false,
      addForm: {
        accountName: "",
        userName: "",
        phone: undefined,
        email: "",
        position: "",
      },
      updateForm: {
        realName: "",
        userName: "",
        phone: "",
        email: "",
        position: "",
      },
      resetDialogVisible: false,
      updatedialogVisible: false,
      starDialogVisible: false,
      stopDialogVisible: false,
      powerDialogVisible: false,
      dialogTableVisible: false,
      menuNodeAll: false,
      isIndeterminate: false,
      ruleForm: {
        roleName: [],
        ids: [],
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        accountName: [
          { required: true, message: "请设置账号信息", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        position: [
          { required: true, message: "请选择职位层级", trigger: "change" },
        ],
        email: [{ required: true, message: "请设置电子邮箱", trigger: "blur" }],
        userName: [
          { required: true, message: "请设置员工姓名", trigger: "blur" },
        ],
      },
      menuOptions: [],
      defaultProps: {
        children: "childMenuList",
        label: "name",
        disabled: this.isDisabled,
      },
      selectedRows: [],
      selectedUserRows: [],
      options: [],
      childId: "",
      childStatus: "",
      status: "",
      managedUserIds: [],
      managedUser: [],
      manager: "",
      setEmailObj: {},
      setPhoneObj: {},
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 点击按钮打开弹框
    openDialog(val) {
      this[val] = true;
    },
    // 表格
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scpoed>
.accountMaMnagement-account {
  .account-header {
    margin: 0 14px;
    margin-top: 5px;
    min-width: 1580px;
  }
  h5 {
    font-size: 16px;
    margin-left: 24px;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 28px;
  }
  .account-btn {
    margin-left: 24px;
  }
  //新增
  .add-dialog {
    padding-top: 0;
    .el-dialog {
      width: 510px;
      height: 413px;
      .el-dialog__body {
        padding: 0px !important;
        margin-bottom: 10px;
        .el-divider--horizontal {
          margin: 0;
          margin-bottom: 10px;
        }
        .add-form {
          // text-align: center;
        }
      }
    }
    .el-dialog:not(.is-fullscreen) {
      margin-top: 28vh !important;
    }
  }
  //修改
  .update-dialog {
    padding-top: 0;
    .el-dialog {
      width: 510px;
      height: 413px;
      .el-dialog__body {
        padding: 0px !important;
        margin-bottom: 10px;
        .el-divider--horizontal {
          margin: 0;
          margin-bottom: 10px;
        }
      }
    }
    .el-dialog:not(.is-fullscreen) {
      margin-top: 28vh !important;
    }
  }
  //权限管理
  .power-dialog {
    padding-top: 0px;
    .el-dialog {
      width: 500px;
      height: 530px;
      .el-dialog__body {
        padding: 0px !important;
        .el-divider--horizontal {
          margin: 0;
          margin-bottom: 10px;
        }
      }
    }
    .el-dialog:not(.is-fullscreen) {
      margin-top: 20vh !important;
    }
    .tree {
      width: 291px;
      height: 269px;
      overflow-y: auto;
      border: 1px solid rgba(0, 0, 0, 0.15);
      margin-left: 120px;
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
  //人员管理
  .user-dialog {
    padding-top: 0;
    .el-dialog {
      width: 500px;
      height: 530px;
      .el-dialog__body {
        padding: 0px !important;
        margin-bottom: 10px;
        .el-divider--horizontal {
          margin: 0;
          margin-bottom: 10px;
        }
        .uesr-table {
          width: 455px;
          height: 374px;
          margin: 32px 24px 0 21px;
          overflow: auto;
        }
      }
    }
    .el-dialog:not(.is-fullscreen) {
      margin-top: 20vh !important;
    }
  }
  .account-table {
    margin: 20px 24px 0 24px;
    .status {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #ddd;
      display: inline-block;
      margin-right: 5px;
    }
  }
  .dialog-footer {
    text-align: center;
  }
  //启用
  .star-dialog-header {
    .el-dialog:not(.is-fullscreen) {
      margin-top: 28vh !important;
    }
    h1 {
      font-weight: 700;
      text-align: center;
    }
    .el-dialog__body {
      padding: 0 25px;
    }
    .dialog-icon {
      font-size: 65px;
      i {
        color: #409eff;
      }
    }
  }
  //停用
  .stop-dialog-header {
    .el-dialog:not(.is-fullscreen) {
      margin-top: 28vh !important;
    }
    h1 {
      font-weight: 700;
      text-align: center;
    }
    .el-dialog__body {
      padding: 0 25px;
    }
    .dialog-icon {
      font-size: 65px;
      i {
        color: #409eff;
      }
    }
  }
  .reset-dialog-header {
    .el-dialog:not(.is-fullscreen) {
      margin-top: 28vh !important;
    }
    h1 {
      font-weight: 700;
      text-align: center;
    }
    .el-dialog__body {
      padding: 0 25px;
    }
    .reset-dialog-icon {
      font-size: 65px;
      i {
        color: #409eff;
      }
    }
  }
  .dialog-body {
    padding-top: 0;
    span {
      font-weight: 700;
      margin-right: 5px;
    }
  }
}
</style>

<style scoped lang="scss">
::v-deep .input-num input::-webkit-outer-spin-button,
::v-deep .input-num input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep .input-num input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>